import React, { useState } from 'react';
import { Layout, Menu, Button, Input, Breadcrumb } from 'antd';
import { UserOutlined, FileSearchOutlined, HistoryOutlined, SettingOutlined, MenuFoldOutlined, MenuUnfoldOutlined, SearchOutlined } from '@ant-design/icons';
import { Link, Outlet, useLocation } from 'react-router-dom';
import './main.less';

const { Header, Sider, Content } = Layout;

const Patient360Main: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();
  
  // 获取当前路径
  const selectedKey = location.pathname.split('/').pop() || 'home';
  
  // 面包屑导航项
  const getBreadcrumbItems = () => {
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      let title = pathSnippets[index];
      
      // 路径名称映射
      const nameMap: Record<string, string> = {
        'patient360': '患者360',
        'home': '首页',
        'detail': '患者详情',
        'history': '就诊历史',
        'documents': '文档管理'
      };
      
      return {
        key: url,
        title: nameMap[title] || title
      };
    });
    
    return extraBreadcrumbItems.map(item => (
      <Breadcrumb.Item key={item.key}>{item.title}</Breadcrumb.Item>
    ));
  };

  return (
    <Layout className="patient360-main-layout">
      <Sider 
        trigger={null} 
        collapsible 
        collapsed={collapsed}
        width={220}
        className="patient360-sider"
      >
        <div className="logo">
          {!collapsed && <span className="logo-text">患者360</span>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          items={[
            {
              key: 'home',
              icon: <UserOutlined />,
              label: <Link to="/patient360/home">首页</Link>,
            },
            {
              key: 'detail',
              icon: <FileSearchOutlined />,
              label: <Link to="/patient360/detail">患者详情</Link>,
            },
            {
              key: 'history',
              icon: <HistoryOutlined />,
              label: <Link to="/patient360/history">就诊历史</Link>,
            },
            {
              key: 'settings',
              icon: <SettingOutlined />,
              label: <Link to="/patient360/settings">设置</Link>,
            },
          ]}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="patient360-header">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className="trigger-button"
          />
          <Breadcrumb className="patient360-breadcrumb">
            {getBreadcrumbItems()}
          </Breadcrumb>
          <div className="header-right">
            <Input 
              prefix={<SearchOutlined />} 
              placeholder="搜索患者" 
              className="search-input"
            />
          </div>
        </Header>
        <Content className="patient360-content">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Patient360Main; 
